<template>
    <div class="mg-p">
        <MgParsesCard class="mg-mb"
                      :key="13"
                      title="文字粒子" :code="dashLineCode">
            <CanvasWord/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb"
                      :key="12"
                      title="圆形扩散" :code="dashLineCode">
            <CanvasExpansion/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb"
                      :key="11"
                      title="表情" :code="dashLineCode">
            <CanvasEmoji/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb"
                      :key="10"
                      title="刮刮乐" :code="dashLineCode">
            <CanvasScrape/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb"
                      :key="7"
                      title="渐变" :code="dashLineCode">
            <CanvasGradual/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb"
                      :key="6"
                      title="Canvas画二次贝塞尔曲线" :code="dashLineCode">
            <CanvasBessel/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb" :key="5" title="Canvas画图像" :code="dashLineCode">
            <CanvasImage/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb" :key="4" title="Canvas小画板" :code="dashLineCode">
            <CanvasBoard/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb" :key="3" title="Canvas画小球运动" :code="dashLineCode">
            <CanvasBall/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb" :key="1" title="Canvas画直线虚线" :code="dashLineCode">
            <CanvasLine/>
        </MgParsesCard>
        <MgParsesCard class="mg-mb" title="Canvas画圆" :key="2" :code="dashLineCode">
            <CanvasCircle/>
        </MgParsesCard>
    </div>
</template>

<script>
    import MgParsesCard from "../../components/common/mg-parses-card";
    import CanvasGradual from "./components/canvas-gradual";
    import CanvasImage from "./components/canvas-image";
    import CanvasScrape from "./components/canvas-scrape";
    import CanvasLine from "./components/canvas-line";
    import CanvasCircle from "./components/canvas-circle";
    import CanvasBall from "./components/canvas-ball";
    import CanvasBoard from "./components/canvas-board";
    import CanvasBessel from "./components/canvas-bessel";
    import CanvasEmoji from "./components/canvas-emoji";
    import CanvasWord from "./components/canvas-word";
    import CanvasExpansion from "./components/canvas-expansion";
    export default {
        name: "index",
        components: {
            CanvasExpansion,
            CanvasWord,
            CanvasEmoji,
            CanvasBessel,
            CanvasBoard,
            CanvasBall,
            CanvasCircle,
            CanvasLine,
            CanvasScrape,
            CanvasImage,
            CanvasGradual,
            MgParsesCard,
        },
        data() {
            return {
                lineCanvas: null,
                clientWidth: 0,
                dashLineCode: `
            //画图主函数
            handleMainDraw() {
                this.lineCanvas = this.$refs.line
                let ctx = this.lineCanvas.getContext('2d')
                let startPoint = [20, 20]
                let dashPointLength = 5
                for (let i = 0; i < 20; i++) {
                    this.drawLine(ctx,
                        i * 5 + startPoint[0],
                        startPoint[1],
                        i * 5 + startPoint[0] + dashPointLength,
                        startPoint[1],
                        6,
                        this.getRandomColor())
                    startPoint[0] += dashPointLength
                }
            },
            //颜色生成器
            getRandomColor() {
                return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
            },
            //直线生成器
            drawLine(ctx, x, y, x1, y1, width, color) {
                ctx.beginPath()
                ctx.moveTo(x, y)
                ctx.lineTo(x1, y1)
                ctx.strokeStyle = color
                ctx.lineWidth = width
                ctx.stroke()
                ctx.closePath()
            }
                `
            }
        },
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped>

</style>
